<template>
  <view class="product-box-district">
    <view class="product-view">
      <view class="product-fl" @tap="toPerson">
        <image :src="circle.head_url" mode="aspectFill" />
      </view>
      <view class="product-fr">
        <Info :circle="circle" :showFollow="showFollow" />
        <view class="product-deploy">
          {{ circle.content }}
        </view>
        <Imgs :imgs="circle.imgs" />
        <view>
          <text class="product-time">{{ formatTime(circle.created_at) }}</text>
          <view class="icon-fr icon-frs" @tap="handleReport">
            <van-icon name="ellipsis" size="36rpx" />
          </view>
          <view class="icon-fr" @tap="() => handleReply({})">
            <van-icon name="chat-o" size="36rpx" />
          </view>
        </view>
        <Comments
          :comments="circle.comments"
          @reply="comment => handleReply(comment)"
        />
      </view>
    </view>
  </view>
</template>

<script>
import Info from './info'
import Imgs from './imgs'
import Comments from './comments'
import { formatTime, toast, navigateTo } from '@utils/index'
import { report } from '@requests/circle'

export default {
  name: 'CircleItem',
  components: {
    Info,
    Imgs,
    Comments
  },
  props: {
    circle: {
      type: Object,
      default: () => {}
    },
    showFollow: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      actions: [{ name: '举报', color: '#006CFF' }],
      showInput: false,
      focus: false,
      inputBottom: 0,
      text: '',
      show: false
    }
  },
  methods: {
    toDetail(e) {
      navigateTo('self/detail', {
        id: e.car_goods_id
      })
    },
    formatTime,
    bindReply() {},
    handleReport() {
      this.$emit('report', this.circle)
    },
    toPerson() {
      navigateTo('circle/person', {
        id: this.circle.user_id
      })
    },
    blur(e) {
      this.inputBottom = 0
      this.showInput = false
      this.focus = false
    },
    handleReply(comment) {
      this.$emit('reply', {
        ...this.circle,
        ...comment
      })
    },
    comfirmText() {},
    handerInputChange() {}
  }
}
</script>

<style>
.product-box-district {
  padding: 0.5rem 0.8rem;
  background: #fff;
}
.product-box-district .product-view {
  padding-bottom: 0.8rem;
  overflow: hidden;
  border-bottom: 2rpx solid rgba(238, 238, 238, 0.5);
}
.product-box-district .find-a {
  padding: 0.8rem 0;
  font-size: 0.965rem;
}
.product-box-district .find-a text {
  float: right;
  font-size: 1.02rem;
}
.product-box-district .product-fl {
  float: left;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
}
.product-box-district .product-fr {
  margin-left: 3.8rem;
}
.product-box-district .product-fl image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.product-box-district .product-deploy {
  font-size: 0.965rem;
  color: #333;
}
.product-box-district .product-time {
  font-size: 0.965rem;
  color: #999;
}
.icon-fr {
  float: right;
  margin-left: 30rpx;
}
.icon-frs {
  margin-right: 16rpx;
}
</style>
